
<template>
  <div>
    <div ref="toobar" class="editor-bar"></div>
    <div
      ref="editor"
      class="editor-content"
      :style="{ height: newheight + 'px', minHeight: newheight + 'px' }"
    ></div>
  </div>
</template>

<script>
// install
// npm i wangeditor --save
// simple use
// <Editor :content.sync="article"></Editor>

import E from 'wangeditor'
export default {
  props: {
    content: {
      type: String,
      default: ''
    },
    heights: {
      type: Number,
      default: 490
    }
  },
  data () {
    return {
      editor: '',
      newheight: 0
    }
  },
  watch: {
    content () {
      this.editor.txt.html(this.content)
    },
    heights (val) {
      this.newheight = val
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const editor = new E(this.$refs.toobar, this.$refs.editor)
      this.editor = editor
      editor.config.zIndex = 500 // z-index属性
      // editor.config.onchange = function (newHtml) {
      //   // 需要改变this指向域
      //   if (newHtml) {
      //     this.$emit('update:content', newHtml)
      //   }
      // }.bind(this)
      editor.config.excludeMenus = [
        // 配置使用哪些编辑器功能
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'underline',
        'strikeThrough',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'list',
        'todo',
        'justify',
        'quote',
        'emoticon',
        'image',
        'video',
        'table',
        'code',
        'splitLine',
        'undo',
        'redo'
      ]
      editor.create()
    },
    // 目前暂时不做双向绑定 解决光标跳动bug,调用该方法获取输入内容
    getHtml () {
      return this.editor.txt.html()
    }
  }
}
</script>
<style lang="scss" scoped>
// .editor-bar {
//     border:1px solid #c9d8db;
//     border-bottom:1px solid #c9d8db;
// }
.editor-content {
  // height:400px;
  border: 1px solid #e5ebf4;
  border-radius: 2px;
  // border-top: none;
  // min-height:400px;
}
</style>
